@import "fonts/default";
@import "normalize";
@import "settings";

@import "compass/css3/images";
@import "compass/css3/box-shadow";
// global already included in _settings.scss
//@import "foundation/components/global"; // *always required
@import "foundation/components/grid";
@import "foundation/components/block-grid";
@import "foundation/components/type";
@import "foundation/components/buttons";
@import "foundation/components/button-groups"; // *requires components/buttons
@import "foundation/components/top-bar";  // *requires components/grid
@import "foundation/components/inline-lists";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/tables";
@import "foundation/components/switch";

.center {
  margin-left: auto;
  margin-right: auto;
}

.spread {
  width: 100%;
}

@media #{$small} {
  .large-text-right {
    text-align: right !important;
  }
}

body, pre, code {
  text-rendering: optimizeSpeed;
  tab-size: 4;
}

#{headers()} {
  // Foundation reduces heading font size and line-height for screens below small breakpoint
  // Force the line-height to remain consistent!
  line-height: $header-line-height;
  //text-rendering: optimizeLegibility; // already set
  word-spacing: -0.05em;
  strong {
    font-weight: 400;
  }
}

h1, h2 {
  letter-spacing: -0.01em;
}

dt, th.tableblock, td.content {
  text-rendering: optimizeLegibility; // already applied to p
}

p, td.content {
  letter-spacing: -0.01em;
  strong {
    letter-spacing: -0.005em;
  }
}

.primary {
  // NOTE include blockquote for when it doesn't have a nested p
  p, blockquote, dt, td.content {
    font-size: 1.0625rem;
  }

  p {
    margin-bottom: 1.25rem;
  }

  // restore font size in sidebar block and regular table cells
  .sidebarblock p, .sidebarblock dt, .sidebarblock td.content, p.tableblock {
    font-size: 1em;
  }

  // FIXME redefine font-size for .lead
}

// this feels a bit crummy
.top-bar-section ul.right li.has-form > a.button {
  display: inline-block;
  width: auto;
  height: auto;
}

.top-bar {
  border-bottom: 3px solid #ffca28;
  height: $topbar-height + 3px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);

  // FIXME our global ul override is breaking this
  ul {
    margin-left: 0;
  }

  .name h1 {
    font-size: 1.1em;
  }

  a {
    font-family: $header-font-family;
    letter-spacing: 0;
    word-spacing: 0;
  }

  ul > li > a.button {
    background: #ffca28;
    border-color: darken(#ffca28, 10%);
    color: #111;
    &:hover, &:focus {
      background: #ffca28;
      //background: darken(#ffca28, 10%);
    }
  }
}

.container {
  & > header {
    background-color: #1863A1;
    //background-color: lighten(#134e6d, 10%);
    background-color: lighten(#105e87, 5%);
    //border-top: 3px solid #707070; // gray
    //border-top: 3px solid #6ad364; // lime
    //border-top: 3px solid #c5c23f; // yellow
    margin-bottom: 1.5em;
    padding: 22px 0 18px 0;
    h1 {
      color: #FFF;
      margin-top: 0.5em;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    }
    strong, .description {
      color: #EEE;
      font-size: 1.5em;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    }
    .hero {
      text-align: center;
      h1 {
        font-size: 3.5em;
        margin-top: 0.25em;
        margin-bottom: 0.2em;

        @media #{$small} {
          font-size: 4em;
          line-height: 1.4;
        }
      }

      .actions {
        margin-top: 1.8em;
      }

      a.button {
        margin-right: 10px;
        text-decoration: none;
        @include radius;
        line-height: 1.3;
        text-align: left;
        padding: 0.75em 1.25em;

        .pull-left {
          margin-left: -0.2em;
          margin-right: 0.4em;
          line-height: inherit;
        }
      }
    }
    .hello .listingblock {
      margin-bottom: 0.5em;
      margin-top: 0.5em;
    }
  }

  a:not(.button) {
    text-decoration: underline;
  }

  h1 > a {
    //color: $body-font-color;
    text-decoration: none !important;
    color: #000;

    &:hover, &:active {
      color: $header-font-color;
    }
  }
}

#toc {
  @include panel($panel-bg, $panel-padding, false);
  @include radius;
  & > ul {
    margin-left: emCalc(2px);
  }
  ul {
    font-family: $header-font-family;
    list-style-type: none;
  }
  ul.sectlevel0 > li > a {
    font-style: italic;
  }
  ul.sectlevel0 ul.sectlevel1 {
    margin: 0.5em 0;
  }
  a {
    text-decoration: none;
    &:hover, &:active {
      text-decoration: underline;
    }
  }
}

// similar to sidebar title, but smaller font
#toctitle {
  @extend h3;
  color: $subheader-font-color;
  //line-height: 1.45;
  font-size: 1.375em;
}

.row.full-width {
  max-width: 100%;
}

body > footer {
  background: lighten($topbar-bg, 15%);
  color: $topbar-link-color;
  padding: 11px 0;
  margin-top: 30px;
  // NOTE I don't know what's causing the extra space under the footer
  margin-bottom: -5px;
  p {
    margin-bottom: 0;
    font-family: $header-font-family;
    font-weight: 300;
    font-size: 0.9em;
    line-height: 1.5;
  }
  a {
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    &:hover {
      color: #fff;
      text-decoration: underline;
    }
  }
}

.clearfix,
.float-group {
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

code, pre {
  color: $body-font-color;
  font-family: $code-font-family;
  font-weight: normal;
}

*:not(pre) > code {
  font-size: $code-font-size;
  font-weight: $code-font-weight;
  color: $code-color;
  background-color: $code-bg-color;
  @include radius;
  line-height: $code-line-height;
  padding: $code-padding;
  word-spacing: $code-word-spacing;
  //white-space: nowrap;
}

pre {
  //line-height: $paragraph-line-height;
  line-height: 1.45;
}

.keyseq {
  color: lighten($body-font-color, 20%);
}

kbd:not(.keyseq) {
  display: inline-block;
  color: $body-font-color;
  font-size: emCalc(12px);
  line-height: 1.4;
  background-color: #f7f7f7;
  //border: 1px solid $pre-border-color;
  border: 1px solid #ccc;
  @include radius(3px);
  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 0.1em white inset);
  margin: -0.15em 0.15em 0 0.15em;
  padding: 0.2em 0.6em 0.2em 0.5em;
  vertical-align: middle;
  white-space: nowrap;
}

.keyseq kbd:first-child {
  margin-left: 0;
}

.keyseq kbd:last-child {
  margin-right: 0;
}

.menuseq, .menu {
  color: darken($body-font-color, 10%);
}

.paragraph.lead > p,
#preamble .sectionbody > .paragraph:first-of-type p {
  @extend %lead;
  color: rgba(0,0,0,.85);
}

#preamble .sectionbody > .paragraph:first-of-type p,
div.secondary > :first-child {
  margin-top: 0;
  @media #{$small} {
    margin-top: 0.25rem;
  }
}

table #preamble .sectionbody > .paragraph:first-of-type p {
  font-size: inherit;
  margin-top: 0;
}

div.secondary {
  // separate primary and secondary content by visible break
  border-top: 1px solid #ddddd8;
  padding-top: 2em;
  @media #{$small} {
    border-top: none;
    padding-top: 0;
  }
  // but not sidebar toc
  &.navigation {
    border-top: none;
    padding-top: 0.25em;
    @media #{$small} {
      padding-top: 0;
    }
  }
}

// this leads to some stylesheet bloat
%title {
  @extend %subheader;
  text-rendering: optimizeLegibility;
  text-align: left;
  font-style: $subheader-font-style;
  font-size: $subheader-font-size;
}

.primary #{headers()} {
//#content #{headers()} {
  & > a.anchor {
    position: absolute;
    z-index: 1001;
    // 1ex is the width of one "x"
    width: 1.5ex;
    margin-left: -1.5ex;
    display: block;
    text-decoration: none !important;
    visibility: hidden;
    text-align: center;
    font-weight: normal;

    &:before {
      content: "\00A7";
      font-size: 0.85em;
      display: block;
      // padding-top highly dependent on font
      padding-top: 0.1em;
    }
  }

  &:hover > a.anchor,
  & > a.anchor:hover {
    visibility: visible;
  }

  & > a.link {
    color: $header-font-color;
    text-decoration: none;
    &:hover {
      color: darken($header-font-color, 5%);
    }
  }
}

// AsciiDoc block styles

// these blocks that don't inherit panel styles
.audioblock,
.imageblock,
.literalblock,
.listingblock,
.stemblock,
.videoblock {
  margin-bottom: $panel-margin-bottom;
}

.admonitionblock td.content,
.audioblock,
.exampleblock,
.imageblock,
.listingblock,
.literalblock,
.stemblock,
.openblock,
.paragraph,
.quoteblock,
table.tableblock,
.verseblock,
.videoblock,
.dlist,
.olist,
.ulist,
.qlist,
.hdlist {
  & > .title {
    @extend %title;
  }
}

table.tableblock > caption.title {
  white-space: nowrap;
  overflow: visible;
  max-width: 0;
}

.admonitionblock > table {
  // separate allows us to control border sides independently
  border-collapse: separate;
  border: 0;
  background: none;
  width: 100%;
  td.icon {
    text-align: center;
    width: 80px;
    img {
      max-width: none;
    }
    .title {
      font-weight: $header-font-weight;
      text-transform: uppercase;
    }
  }

  td.content {
    padding-left: emCalc(18px);
    padding-right: emCalc(20px);
    border-left: $hr-border-width $hr-border-style $hr-border-color;
    //color: $blockquote-font-color;
    color: $blockquote-cite-font-color;

    & > div:last-child {
      p, ol, ul, dl, dl dd:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.admonitionblock.lead > table td.content {
  font-size: $paragraph-font-size * 1.5;
  line-height: $paragraph-line-height;
  color: $body-font-color;
}

.exampleblock > .content {
  @include panel($body-bg, $panel-padding, false);
  @include radius;
  background-color: #fffef7;
  border-color: $panel-border-color;
  @include single-box-shadow(0, 1px, 4px, null, $panel-border-color);
  padding-bottom: 0; // we force a margin-bottom on the last child instead

  & > :last-child {
    margin-bottom: emCalc(20px);
  }
}

.exampleblock.result {
  display: none;
}

.sidebarblock {
  @include panel($panel-bg, $panel-padding, false);
  @include radius;

  padding-bottom: 0; // we force a margin-bottom on the last child in content instead

  & > .content {
    & > .title {
      @extend h3;
      text-align: center;
      color: $subheader-font-color;
      //line-height: 1.45;
      margin-top: 0; // override margin increase we use to separate sections
      //border-bottom: $hr-border-width $hr-border-style $hr-border-color;
    }
    & > :last-child {
      margin-bottom: emCalc(20px);
    }
  }

  p, dt, td.content {
    font-size: 1em;
  }
}

.literalblock pre,
.listingblock pre:not(.highlight),
.listingblock pre[class="highlight"],
.listingblock pre[class^="highlight "],
.listingblock pre.CodeRay {
  background-color: #f7f7f8;

  .sidebarblock & {
    background-color: #f2f2f1;
  }
}

.literalblock,
.listingblock {
  pre, pre[class] {
    @include radius;
    word-wrap: break-word;

    &.nowrap {
      overflow-x: auto;
      white-space: pre;
      word-wrap: normal;
    }

    // screens below breakpoint
    padding: emCalc(16px);
    font-size: emCalc(13px);

    @media #{$small} {
      font-size: emCalc(14.5px);
    }

    @media #{$medium} {
      font-size: emCalc(16px);
    }
  }
}

.literalblock.output pre {
  color: #f7f7f8;
  background-color: $code-color;
}

.listingblock.stacked {
  margin-bottom: 0;
  pre {
    border-bottom: 0;
  }
}

.listingblock a.view-result {
  float: right;
  font-weight: normal;
  text-decoration: none;
  font-size: 0.9em;
  line-height: 1.4;
  margin-top: 0.15em;
}

.listingblock > .content {
  // give floating language text a place to drop anchor
  position: relative;
}

.listingblock code[data-lang]:before {
  display: none;
  content: attr(data-lang);
  position: absolute;
  text-transform: uppercase;
  font-size: emCalc(12px);
  //top: 0.5rem; // 0.67em
  top: 0.425rem;
  right: 0.5rem; // 0.67em
  line-height: 1;
  color: #999;
}

.listingblock:hover code[data-lang]:before {
  display: block;
}

.listingblock.terminal pre .command:before {
  content: attr(data-prompt);
  padding-right: 0.5em;
  color: #999;
}

.listingblock.terminal pre .command:not([data-prompt]):before {
  content: "$";
}

.quoteblock {
  margin: 0 1em $paragraph-margin-bottom 1.5em;
  display: table; // enables auto width
  & > .title {
    margin-left: -1.5em;
    margin-bottom: 0.75em;
  }

  blockquote, blockquote p {
    color: $blockquote-font-color;
    font-size: 1.15rem;
    line-height: 1.75;
    word-spacing: 0.1em;
    letter-spacing: 0;
    font-style: italic;
    text-align: justify;
  }

  blockquote {
    margin: 0;
    padding: 0;
    border: 0;

    &:before {
      content: "\201c";
      float: left;
      //font-size: 3em;
      font-size: 2.75em;
      font-weight: bold;
      line-height: 0.6em; // use 0.67em if font-weight: bold
      margin-left: -0.6em;
      //color: $blockquote-cite-font-color;
      color: $subheader-font-color;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    & > .paragraph:last-child p {
      margin-bottom: 0;
    }
  }

  .attribution {
    //margin-top: 0.5rem;
    margin-top: 0.5em;
    margin-right: 0.5ex;
    text-align: right;
  }

  .quoteblock {
    margin-left: 0;
    margin-right: 0;
    padding: 0.5em 0;
    border-left: 3px solid $blockquote-cite-font-color;

    blockquote {
      padding: 0 0 0 0.75em;
      &:before {
        display: none;
      }
    }
  }
}

.quoteblock.abstract {
  margin: 0 0 $paragraph-margin-bottom 0;
  display: block;
  blockquote, blockquote p {
    text-align: left;
    word-spacing: 0;
    //letter-spacing: -0.001em;
  }

  blockquote, blockquote p:first-of-type {
    //&:first-line {
    //  font-weight: bold;
    //  letter-spacing: 0;
    //}

    &:before {
      display: none;
    }
  }
}

div.secondary .quoteblock blockquote {
  font-size: 1.0625rem;
}

.verseblock {
  //margin: 0 0.5em $paragraph-margin-bottom 0.5em;
  margin: 0 1em $paragraph-margin-bottom 1em;
  pre {
    // FIXME make me a variable
    font-family: "Open Sans", "Sans", sans;
    font-size: 1.15rem;
    color: $blockquote-font-color;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    strong {
      font-weight: 400;
    }
  }

  .attribution {
    margin-top: 1.25rem;
    margin-left: 0.5ex;
  }
}

.quoteblock,
.verseblock {
  .attribution {
    font-size: $blockquote-cite-font-size;
    line-height: 1.45;
    font-style: italic;
    br {
      display: none;
    }
    cite {
      display: block;
      letter-spacing: -0.05em;
      color: $blockquote-cite-font-color;
    }
  }
}

table.tableblock {
  max-width: 100%;
  // separate allows us to control border sides independently
  border-collapse: separate;
  td > .paragraph:last-child p,
  th, td {
    & > p:last-child {
      margin-bottom: 0;
    }
  }
}

// NOTE .grid-* selectors must be defined before .frame-* selectors in order for styles to cascade properly
table.tableblock,
th.tableblock,
td.tableblock {
  border: 0 solid $table-border-color;
}

table.grid-all th.tableblock,
table.grid-all td.tableblock {
  border-width: 0 $table-border-size $table-border-size 0;
}

table.grid-all tfoot > tr > th.tableblock,
table.grid-all tfoot > tr > td.tableblock {
  border-width: $table-border-size $table-border-size 0 0;
}

table.grid-cols th.tableblock,
table.grid-cols td.tableblock {
  border-width: 0 $table-border-size 0 0;
}

table.grid-all * > tr > .tableblock:last-child,
table.grid-cols * > tr > .tableblock:last-child {
  border-right-width: 0;
}

table.grid-rows th.tableblock,
table.grid-rows td.tableblock {
  border-width: 0 0 $table-border-size 0;
}

table.grid-all tbody > tr:last-child > th.tableblock,
table.grid-all tbody > tr:last-child > td.tableblock,
table.grid-all thead:last-child > tr > th.tableblock,
table.grid-rows tbody > tr:last-child > th.tableblock,
table.grid-rows tbody > tr:last-child > td.tableblock,
table.grid-rows thead:last-child > tr > th.tableblock {
  border-bottom-width: 0;
}

table.grid-rows tfoot > tr > th.tableblock,
table.grid-rows tfoot > tr > td.tableblock {
  border-width: $table-border-size 0 0 0;
}

table.frame-all {
  border-width: $table-border-size;
}

table.frame-sides {
  border-width: 0 $table-border-size;
}

table.frame-topbot {
  border-width: $table-border-size 0;
}

@each $halign in (left, right, center) {
  th.halign-#{$halign},
  td.halign-#{$halign} {
    text-align: $halign;
  }
}

@each $valign in (top, bottom, middle) {
  th.valign-#{$valign},
  td.valign-#{$valign} {
    vertical-align: $valign;
  }
}

// NOTE Fix required in Foundation, user-agent stylesheet is overriding
table thead th,
table tfoot th {
  font-weight: $table-head-font-weight;
}

// vertical table header (block)
tbody tr th {
  display: $table-display;
  line-height: $table-line-height;
  background: $table-head-bg;
}

// vertical table header (content)
tbody tr th,
tfoot tr th {
  &, p {
    color: $table-head-font-color;
    font-weight: $table-head-font-weight;
  }
}

p.tableblock > code:only-child {
  background: none;
  padding: 0;
}

p.tableblock {
  font-size: 1em;
}

td > div.verse {
  white-space: pre;
}

table.tableblock.unstyled {
  border: 0;
  background: none;
}

// AsciiDoc list styles

ol {
  margin-left: $list-side-margin + emCalc(4px);
}

ul li ol {
  margin-left: $list-side-margin;
}

dl dd {
  margin-left: $definition-list-content-margin-left;
}

// argh
dl dd:last-child,
dl dd:last-child > :last-child {
  margin-bottom: 0;
}

ol > li p,
ul > li p,
ul dd,
ol dd,
.olist .olist,
.ulist .ulist,
.ulist .olist,
.olist .ulist {
  margin-bottom: $paragraph-margin-bottom / 2;
}

ul.unstyled,
ol.unnumbered,
ul.checklist,
ul.none {
  list-style-type: none;
}

ul.unstyled,
ol.unnumbered,
ul.checklist {
  margin-left: emCalc(10px);
}

// give the checkbox some room
ul.checklist li > p:first-child > .fa-check-square-o:first-child,
ul.checklist li > p:first-child > input[type="checkbox"]:first-child {
  margin-right: 0.25em;
}

ul.checklist li > p:first-child > input[type="checkbox"]:first-child {
  position: relative;
  top: 1px;
}

ul.inline {
  @include inline-list;
}

.compact li > p {
  margin: 0;
}

// used when you need to style the term inline
// or should we name it "natural"?
.unstyled dl dt {
  font-weight: normal;
  font-style: normal;
}

@mixin ordered-list-type($class, $type) {
  ol.#{$class} {
    list-style-type: #{$type};
  }
}

@include ordered-list-type(arabic, decimal);
@include ordered-list-type(decimal, decimal-leading-zero);
@include ordered-list-type(loweralpha, lower-alpha);
@include ordered-list-type(upperalpha, upper-alpha);
@include ordered-list-type(lowerroman, lower-roman);
@include ordered-list-type(upperroman, upper-roman);
@include ordered-list-type(lowergreek, lower-greek);
//@include ordered-list-type(armenian, armenian);
//@include ordered-list-type(georgian, georgian);

.hdlist > table,
.colist > table {
  // separate allows us to control border sides independently
  //border-collapse: separate;
  border: 0;
  background: none;
  & > tbody > tr {
    background: none;
  }
}

td.hdlist1,
td.hdlist2 {
  vertical-align: top;
  padding: 0 emCalc(10px);
}

td.hdlist1 {
  font-weight: bold;
  padding-bottom: $paragraph-margin-bottom;
}

.literalblock + .colist,
.listingblock + .colist {
  margin-top: -0.5em;
}

.colist > table {
  tr > td:first-of-type {
    padding: 0 0.75em;
    line-height: 1;
  }

  tr > td:last-of-type {
    padding: emCalc(4px) 0;
  }
}

.qanda > ol > li > p > em:only-child {
  color: darken($primary-color, 5%);
}

// picked from foundation/components/_thumbs.css
.thumb,
.th {
  line-height: 0;
  display: inline-block;
  border: $thumb-border-style $thumb-border-width $thumb-border-color;
  @if $experimental {
    -webkit-box-shadow: $thumb-box-shadow;
  }
  box-shadow: $thumb-box-shadow;
}

.imageblock {
  &.left,
  &[style*="float: left"] {
    margin: emCalc(4px) emCalc(10px) $panel-margin-bottom 0;
  }
  &.right,
  &[style*="float: right"] {
    margin: emCalc(4px) 0 $panel-margin-bottom emCalc(10px);
  }

  & > .title {
    margin-bottom: 0;
  }

  &.thumb,
  &.th {
    border-width: $thumb-border-width + ($thumb-border-width * 0.5);
    & > .title {
      padding: 0 emCalc(2px);
    }
  }
}

.image {
  // QUESTION should we require the related role?
  // "related" mean "illustrative" or "supporting" of the text
  //&.related,
  //&.rel {
  //}

  &.left,
  &.right {
    margin-top: emCalc(4px);
    margin-bottom: emCalc(4px);
    display: inline-block;
    line-height: 0;
  }

  &.left {
    margin-right: emCalc(10px);
  }

  &.right {
    margin-left: emCalc(10px);
  }
}

a.image {
  text-decoration: none;
}

// AsciiDoc footnote styles
sup.footnote,
sup.footnoteref {
  font-size: emCalc(14px);
  position: static;
  vertical-align: super;
  a {
    text-decoration: none;
    &:active {
      text-decoration: underline;
    }
  }
}

#footnotes {
  padding-top: emCalc(12px);
  padding-bottom: emCalc(12px);
  margin-bottom: $panel-margin-bottom / 2;
  hr {
    width: 20%;
    min-width: emCalc(100px);
    margin: -.25em 0 0.75em 0;
    border-width: 1px 0 0 0;
  }
  .footnote {
    padding: 0 0.375em 0 0.225em; // .15em difference is due to text-indent
    line-height: 1.3334;
    font-size: emCalc(14px);
    margin-left: 1.2em;
    text-indent: -1.05em;
    margin-bottom: 0.2em;
    a:first-of-type {
      font-weight: bold;
      text-decoration: none;
    }
  }

  .footnote:last-of-type {
    margin-bottom: 0;
  }

  // footnotes in embedded documents
  #content & {
    margin-top: -$panel-margin-bottom / 2;
    margin-bottom: 0;
    padding: emCalc(12px) 0;
  }
}

// for embedded gists
.gist .file-data > table {
  border: 0;
  background: #fff;
  width: 100%;
  margin-bottom: 0;
  td.line-data {
    width: 99%;
  }
}

// Styles and colors for inline fun
.mono {
  font-family: $code-font-family;
}

  div.unbreakable {
    page-break-inside: avoid;
  }

  .big {
    font-size: larger;
  }

  .small {
    font-size: smaller;
  }

  @each $decoration in (underline, overline, line-through) {
    .#{$decoration} {
      text-decoration: $decoration;
    }
  }

  // colors must be quoted or else they may get converted to hex in compression output mode
  @each $color in ('aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow') {
    .#{$color} {
      color: scale-color(string-to-color($color), $lightness: $rainbow-lightness);
    }

    .#{$color}-background {
      background-color: scale-color(string-to-color($color), $lightness: $rainbow-bg-lightness);
    }
  }

  //*:not(code) > .comment {
  //  background: yellow;
  //}

// use alternative triple line menu icon so it appears in older webkit browsers
.top-bar .toggle-topbar.menu-icon a {
  @include background-image(linear-gradient(top,
    $topbar-bg 0%, $topbar-bg 27%,
    $topbar-menu-icon-color 27%, $topbar-menu-icon-color 33%,
    $topbar-bg 33%, $topbar-bg 45%,
    $topbar-menu-icon-color 45%, $topbar-menu-icon-color 50%,
    $topbar-bg 50%, $topbar-bg 62%,
    $topbar-menu-icon-color 62%, $topbar-menu-icon-color 68%,
    $topbar-bg 68%, $topbar-bg 100%));
  width: 18px;
  right: -1px;
  span {
    box-shadow: none;
    -webkit-box-shadow: none;
  }
}

// fix Foundation not calculating based on $reveal-position-top for large screens
//@media #{$small} {
//  .reveal-modal {
//    top: $reveal-position-top + emCalc(60px);
//    padding: $reveal-modal-padding;
//  }
//}

.imageblock.feature {
  @include panel($bg: #fff, $padding: 0.5em);

  & > .title > span.credit {
    font-weight: normal;
    font-style: italic;
    color: $blockquote-cite-font-color;
  }
}

.button-group {
  .button.first {
    @include side-radius($default-float, $button-radius);
  }

  & > li i.fa {
    line-height: 1rem;
    padding-left: emCalc(3px);
    padding-top: 0.2rem;
    vertical-align: middle;
    &.fa-github {
      font-size: 1.65em;
    }
    &.fa-file-text-alt {
      font-size: 1.4em;
    }
  }
  & > li a {
    i.fa {
      color: $body-font-color;
    }
    &:hover i.fa {
      color: $anchor-font-color;
    }
  }
}

b.button {
  padding: 4px 10px 3px 10px;
}

article.post {
  .entry-header {
    h4 {
      font-size: 1.1em;
      margin-top: -1em;
      letter-spacing: 0;
    }

    em {
      font-style: normal;
    }
  }

  .entry-content {
    margin-bottom: $panel-margin-bottom;
  }

  .tags .label {
    margin-right: $pagination-li-margin;
  }
}

ul.pagination li.arrow a {
  text-decoration: none;
}

h2.category {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eaeaea;
}

li.identity p.label {
  margin: 0.3em 0 0 0;
  font-size: 1.2em;
  line-height: 1.2;
}

li.identity p.label:first-child {
  height: 2em;
}

li.identity span.name {
  padding-right: 0.175em;
}

li.identity a.github {
  color: #ccc;
  text-decoration: none;
  display: inline-block;
  width: 0;
  &:hover {
    color: #7a7a7a;
  }
}

li.identity a.url {
  display: block;
}

li > span.separator {
  content: ' ';
  display: block;
  float: left;
  background: #ADADAD;
  margin: 0 10px;
  height: 30px;
  width: 1px;
}

ul.toolbar {
  li a.toggle-navigation {
    i.fa {
      padding: 0 1ex;
      line-height: 1.25em;
      vertical-align: text-top;
    }
    i.fa-toggle-on {
      display: inherit;
    }
    i.fa-toggle-off {
      display: none;
    }
  }
  &.off li a.toggle-navigation {
    i.fa-toggle-on {
      display: none;
    }
    i.fa-toggle-off {
      display: inherit;
    }
  }
}

.navigation > #toc {
  //background: none;
  background-color: #f7f8f7;
  border: none;
  @include radius(0);
  ul li ul {
    margin-left: 1em;
  }
  ul > li a {
    color: rgba(0, 0, 0, 0.85);
    //display: block;
    //padding-left: 10px;
    //&:hover {
    //  background-color: #ba3c23;
    //  color: #fff;
    //}
  }
}

@import "awesome-icons";
//@import "highlightjs-custom";
@import "asciidoctor-coderay";
